<template>
  <el-card shadow="never">
    <div class="gc-header">
      <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" @expand="getTableH" />
      <ZwTable ref="tableRef" class="table-box" :option="tableOption" :rowKey="getRowKey" :fetch-params="state.searchParams" :fetch-api="fetchApi()"></ZwTable>
    </div>
  </el-card>
</template>
<script setup lang="tsx">
  import { ref, nextTick, computed, reactive } from 'vue'
  import { ElMessage, ElAvatar } from 'element-plus'
  import { memberList } from '@/api/groupManageList'
  import { useStore } from '@/store'
  import ZwSearchForm from '@/components/zw/search-form/SearchForm'
  import ZwTable from '@/components/zw/table/Table'
  import { deepCopy } from '@/utils/helper'

  const store = useStore()
  const formRef = ref<FormInstance>()
  const PaginationRef = ref(null)
  const groupTable: any = ref(null)
  const tableRef: any = ref(null)
  const tableData = ref([])
  const props = defineProps(['pull_id'])
  const searchOption = computed(() => {
    return [
      {
        label: '搜索成员',
        name: 'keyword',
        value: '',
        type: 'input',
        width: '280px',
        placeholder: '请输入要搜索的成员'
      },
      {
        label: '送达状态',
        name: 'send_status',
        value: '',
        type: 'select',
        placeholder: '请选择送达状态',
        fetchOptionApi: () => {
          return new Promise((resolve) => {
            resolve([
              { name: '全部', id: '-1' },
              { name: '未发送', id: '0' },
              { name: '已发送', id: '2' }
            ])
          })
        },
        formatOption: (v: { name: any; id: any }) => ({
          label: v.name,
          value: v.id
        })
      }
    ]
  })
  const tableOption = [
    {
      prop: 'cust_avatar',
      label: '成员',
      width: 180,
      render({ row }) {
        return (
          <div style="display: flex; align-items: center">
            <ElAvatar shape="square" size={36} src={row.work_user?.avatar} />
            <span class="workName">{row.work_user?.name || '--'}</span>
          </div>
        )
      }
    },
    {
      prop: 'expected_send_num',
      label: '预计发送客户',
      width: 180,
      render({ row }) {
        return <div>{row.expected_send_num || 0}</div>
      }
    },
    {
      prop: 'send_num',
      label: '实际发送客户',
      width: 180,
      render({ row }) {
        return <div>{row.send_num || 0}</div>
      }
    },
    {
      prop: 'join_groupchat_num',
      label: '已入群客户',
      width: 180,
      render({ row }) {
        return <div>{row.join_groupchat_num || 0}</div>
      }
    },
    {
      prop: 'send_status',
      label: '送达状态',
      width: 180,
      render({ row }) {
        return <div>{row.send_status ? '已发送' : '未发送'}</div>
      }
    }
  ]
  const getRowKey = (row: any) => {
    return row.id
  }

  const defaultParams = reactive({
    pull_id: '',
    keyword: '',
    send_status: ''
  })
  const state = reactive({
    searchParams: deepCopy({ ...defaultParams, pull_id: props.pull_id })
  })
  const search = (data: any) => {
    const res = { ...state.searchParams, ...data }
    state.searchParams = res
  }
  const reset = (v?: any) => {
    const res = { ...state.searchParams, ...v }
    state.searchParams = res
  }
  const fetchApi = () => {
    // 获取文件列表
    getTableH()
    return memberList
  }
  const getTableH = () => {
    nextTick(() => {
      tableRef.value.getTableH()
    })
  }
  const options = [
    { label: '全部', value: '-1' },
    { label: '未发送', value: '0' },
    { label: '已发送', value: '2' }
  ]
</script>
<style scoped lang="scss">
:deep(.table_header_title) {
  height: 60px;
  th.el-table__cell {
    background: #f9f9f9;
    padding: 10px 0;
  }
}
.gc-header {
  margin-bottom: 20px;
  background-color: #f9f9f9;

    .form-inline {
      display: flex;
      justify-content: space-between;

      .el-form-item {
        margin-bottom: 0;
        padding: 18px 18px;
      }

      display: flex;
      align-items: center;
    }
  }
  .emty_img {
    margin-top: 50px;
    transform: translateX(15%);
  }
  .emty_title {
    margin-top: -50px;
  }
  :deep(.workName) {
    margin-left: 10px;
    font-size: 14px;
    color: #33302d;
  }
</style>
